<template>
	<div class="body">
		<div class="page-breadcrumb">
			<div class="pannel-title">
				<div>
					单位管理 /
					<font style="color: #4687ff">单位详情</font>
				</div>
			</div>
			<div class="back-btn" v-if="$store.state.breadcrumb.isBack" @click="back">返回</div>
		</div>
		<!-- 详情回填 -->
		<div class="card-body">
			<!-- 单位信息 -->
			<div class="form-card">
				<div class="title">
					单位信息
					<a-button class="title-btn" type="primary" :loading="isloading" shape="round" @click="onSubmit(formState)">保存</a-button>
				</div>
				<div class="body">
					<a-form ref="form1" :model="formState" :rules="rules" :label-col="formConfig01.labelCol" :wrapper-col="formConfig01.wrapperCol">
						<a-row>
							<a-col :span="6">
								<a-form-item label="单位名称" name="name">
									<a-input v-model:value="formState.name" />
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="单位地址" name="address">
									<a-input v-model:value="formState.address" />
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="关注等级" name="inspectLevel">
									<a-select v-model:value="formState.inspectLevel" placeholder="please select your zone">
										<a-select-option v-for="item in inspectLevels" :key="item" :value="item.id">{{ item.name }}</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="辖区派出所" name="psId">
									<a-select v-model:value="formState.psId" placeholder="please select your zone">
										<a-select-option v-for="item in psIds" :key="item" :value="item.id">{{ item.name }}</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<!-- 第二排 -->
							<a-col :span="6">
								<a-form-item label="单位性质" name="natureTypeId">
									<a-select v-model:value="formState.natureTypeId" placeholder="单位性质">
										<a-select-option v-for="item in natureTypeIds" :key="item" :value="item.id">{{ item.name }}</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
						</a-row>
					</a-form>
				</div>
			</div>
			<!-- 联系信息 -->
			<div class="form-card">
				<div class="title">联系信息</div>
				<div class="body">
					<a-form ref="form2" :model="formState" :rules="rules" :label-col="formConfig01.labelCol" :wrapper-col="formConfig01.wrapperCol">
						<a-row>
							<a-col :span="6">
								<a-form-item label="负责人姓名" name="contactName">
									<a-input v-model:value="formState.contactName" />
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="负责人电话" name="contactMobile">
									<a-input v-model:value="formState.contactMobile" />
								</a-form-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="6">
								<a-form-item label="网络安全部门" name="netSecDep">
									<a-input v-model:value="formState.netSecDep" />
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="部门负责人姓名" name="netSecName">
									<a-input v-model:value="formState.netSecName" />
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="部门负责人电话" name="netSecMobile">
									<a-input v-model:value="formState.netSecMobile" />
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="部门负责人邮箱" name="netSecEmail">
									<a-input v-model:value="formState.netSecEmail" />
								</a-form-item>
							</a-col>
						</a-row>
					</a-form>
				</div>
			</div>
			<!-- 资产 -->
			<div class="form-card">
				<div class="title">资产</div>
				<div class="body">
					<a-form ref="form3" :model="formState" :rules="rules" :label-col="formConfig02.labelCol" :wrapper-col="formConfig02.wrapperCol">
						<a-row>
							<a-col :span="12">
								<a-form-item label="网站域名" name="urls">
									<a-textarea style="min-height: 156px; max-height: 156px" v-model:value="formState.urls" placeholder="请输入网站主页地址，如:http://www.baidu.com&#10;多个主页地址可用{,}分割&#10;输入主页地址时需包括协议信息，如无协议信息，则默认为http" />
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item label="IP或IP段" name="ips">
									<a-textarea
										style="min-height: 156px; max-height: 156px"
										v-model:value="formState.ips"
										placeholder="支持以下几种格式输入IP或IP段，多个IP或IP段之间以“,”分割&#10;192.168.1.1&#10;192.168.1.1-10"
									/>
								</a-form-item>
							</a-col>
						</a-row>
					</a-form>
				</div>
			</div>
		</div>
		<!-- 资产列表 -->
		<div class="card-body">
			<div class="title">
				资产详情
				<span class="title-msg">
					<font style="font-size: 14px; color: #999999">上次更新时间：{{ assets.lastExecTime }}</font>
				</span>
			</div>
			<a-tabs style="margin-top: 20px" v-model:activeKey="activeKey" type="card">
				<a-tab-pane key="1" tab="端口开放">
					<div class="form-card">
						<span class="title-msg">
							(
							<font style="color: #4687ff">{{ assets.ipCount }}</font>
							IP总数，
							<font style="color: #4687ff">{{ assets.assetCount }}</font>
							资产总数 ) 有端口开放
							<font style="color: #4687ff">
								{{ assets.portAssetOpenCount }}
							</font>
							个 无端口开放
							<font style="color: #4687ff">{{ assets.portAssetCloseCount }}</font>
							个 共检出端口
							<font style="color: #4687ff">
								{{ assets.appAssetScanCount }}
							</font>
							个 高危端口
							<font style="color: #4687ff">{{ assets.portHighRiskCount }}</font>
							个
						</span>
						<div class="body">
							<Grid :gridDatas="grid01" v-on:getTeg="doTheThing($event, this)" v-on:changePage="onChangePage($event, this)"></Grid>
						</div>
					</div>
				</a-tab-pane>
				<a-tab-pane key="2" tab="网站测绘" force-render>
					<div class="form-card">
						<span class="title-msg">
							(
							<font style="color: #4687ff">{{ assets.urlCount }}</font>
							网站总数，
							<font style="color: #4687ff">{{ assets.appAssetScanCount }}</font>
							共检测资产总数 ) 有组件资产数
							<font style="color: #4687ff">
								{{ assets.appAssetOpenCount }}
							</font>
							个 无组件资产数
							<font style="color: #4687ff">{{ assets.appAssetCloseCount }}</font>
							个
						</span>
						<div class="body">
							<Grid :gridDatas="grid02" v-on:getTeg="doTheThing(e, this)" v-on:changePage="onChangePage($event, this)"></Grid>
						</div>
					</div>
				</a-tab-pane>
			</a-tabs>
		</div>
		<!-- 信息变更记录 -->
		<!-- <div class="card-body">
         <div class="form-card">
            <div class="title">
              变化信息
            </div>
            <div class="body" >
              <div style="width:100%">
                <a-steps :current="0">
                  <template #progressDot="{ index, status, prefixCls }">
                    <a-popover>
                      <template #content>
                        <span>step {{ index }} status: {{ status }}</span>
                      </template>
                      <span :class="`${prefixCls}-icon-dot`" />
                    </a-popover>
                  </template>
                  <a-step title="10.10.1.10" description="MAC地址更新为：00:0C:21:EF:72:23" />
                  <a-step title="10.10.1.12" description="MAC地址更新为：00:0C:21:EF:72:23" />
                  <a-step title="Waiting" description="You can hover on the dot." />
                </a-steps>
              </div>
            </div>
        </div>
      </div> -->
		<!-- 漏洞信息 -->
		<div class="card-body">
			<div class="form-card">
				<div class="title">
					漏洞信息
					<span class="title-msg">
						（共检测威胁总数
						<font style="color: #fe4e50">{{ vulns.bugCount }}</font>
						个
						<font style="color: #fc890c">{{ vulns.highBugCount }}</font>
						高危
						<font style="color: #ffd966">{{ vulns.mediumBugCount }}</font>
						中危
						<font style="color: #4687ff">{{ vulns.lowBugCount }}</font>
						低危 ）
						<font style="font-size: 14px; color: #999999">上次更新时间：{{ vulns.lastExecTime }}</font>
					</span>
				</div>
				<div class="body">
					<Grid :gridDatas="grid03" v-on:getTeg="doTheThing($event, this)" v-on:changePage="onChangePage($event, this)"></Grid>
				</div>
			</div>
		</div>
		<!-- 检验记录 -->
		<!-- <div class="card-body">
         <div class="form-card">
            <div class="title">
              检验记录
              <div class="title-btnB">
                <div class="icon">
                  <svg focusable="false" class="" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg>
                </div>
                <span>下载</span> 
              </div>
            </div>
            <div class="body" >
              <Grid :gridDatas='grid03'  v-on:getTeg="doTheThing($event,this)" v-on:changePage='onChangePage($event,this)' ></Grid>
            </div>
        </div>
      </div> -->
	</div>
</template>

<script>
import httpRequest from "@/util/httpRequest";
import Grid from "@/components/gridBody";
import baseUtil from "@/util/baseUtil";
import validator from "@/util/validator";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
export default {
	name: "disktop",
	components: {
		Grid,
	},
	data() {
		return {
			assets: {},
			vulns: {},
			activeKey: "1",
			natureTypeIds: [],
			psIds: "",
			isloading: false,
			inspectLevels: [
				{ id: "High", name: "重点单位" },
				{ id: "Medium", name: "普通单位" },
			],
			formConfig01: {
				labelCol: {
					span: 6,
				},
				wrapperCol: {
					span: 24,
				},
			},
			formConfig02: {
				labelCol: {
					span: 3,
				},
				wrapperCol: {
					span: 24,
				},
			},
			formState: {
				id: "",
				name: "",
				address: "",
				inspectLevel: "", // High重点企业,Medium普通企业
				status: "", // Enabled开启, Disabled关闭
				natureTypeId: "", //企业性质编号
				natureTypeName: "", // 企业性质名称
				psId: "", // 辖区派出所编号
				psName: "", // 辖区派出所名称
				resDepartment: "",
				contactName: "",
				contactMobile: "",
				contactEmail: "",
				urls: "", // 域名多个时[,]逗号分割
				ips: "", // IP多个时[,]逗号分割
				assetCount: "", // IP和域名总数
				bugCount: "", // 漏洞总数
				inspectCount: "", // 检验总数
				inspectTime: "", // 最后检验时间
				createTime: "",
				editTime: "",
			},
			rules: {
				name: {
					required: true,
					message: "不能为空",
					trigger: "blur",
				},
				// address: {
				//     required: true,
				//     message: "不能为空",
				//     trigger: "blur",
				// },
				// inspectLevel: {
				//     required: true,
				//     message: "不能为空",
				//     trigger: "blur",
				// },
				// natureTypeId: {
				//     required: true,
				//     message: "不能为空",
				//     trigger: "change",
				//     type: "number",
				// },
				psId: {
					required: true,
					message: "不能为空",
					trigger: "change",
					type: "number",
				},
				// contactName: {
				//     required: true,
				//     message: "不能为空",
				//     trigger: "blur",
				// },
				contactMobile: [
					// {
					//     required: true,
					//     message: "不能为空",
					//     trigger: "blur",
					// },
					{
						trigger: "blur",
						validator: validator.mobile,
					},
				],
				// netSecDep: {
				//     required: true,
				//     message: "不能为空",
				//     trigger: "blur",
				// },
				// netSecName: {
				//     required: true,
				//     message: "不能为空",
				//     trigger: "blur",
				// },
				netSecMobile: [
					// {
					//     required: true,
					//     message: "不能为空",
					//     trigger: "blur",
					// },
					{
						trigger: "blur",
						validator: validator.mobile,
					},
				],
				netSecEmail: [
					// {
					//     required: true,
					//     message: "不能为空",
					//     trigger: "blur",
					// },
					{
						trigger: "blur",
						validator: validator.email,
					},
				],
				// urls: {
				//     required: true,
				//     message: "不能为空",
				//     trigger: "blur",
				// },
				// ips: {
				//     required: true,
				//     message: "不能为空",
				//     trigger: "blur",
				// },
			},
			pageData: {
				inspectLevel: "",
				keywords: "",
				pageNo: 1,
			},
			// 资产详情
			grid01: {
				pageData: {
					gridType: 1,
					total: 0,
					current: 1,
					firmId: this.$route.params.id,
					keywords: "",
					pageNo: "1",
					pageSize: 10,
				},
				data: [],
				columns: [
					{
						title: "IP状态",
						dataIndex: "offline",
						key: "offline",
						slots: {
							customRender: "offline",
						},
					},
					{
						title: "IP",
						dataIndex: "value",
						key: "value",
					},
					{
						title: "端口",
						dataIndex: "port",
						key: "port",
					},
					{
						title: "服务协议",
						dataIndex: "protocol",
						key: "protocol",
					},
					{
						title: "组件",
						dataIndex: "layer",
						key: "layer",
						slots: {
							customRender: "layers",
						},
					},
					{
						title: "原始数据",
						dataIndex: "banner",
						key: "banner",
					},
					{
						title: "业务系统",
						dataIndex: "banner",
						key: "banner",
					},
				],
			},
			grid02: {
				pageData: {
					total: 0,
					gridType: 2,
					current: 1,
					firmId: this.$route.params.id,
					keywords: "",
					pageNo: "1",
					pageSize: 10,
				},
				data: [],
				columns: [
					{
						title: "网站状态",
						dataIndex: "offline",
						key: "offline",
						slots: {
							customRender: "offline",
						},
					},
					{
						title: "主页地址",
						dataIndex: "value",
						key: "value",
					},
					{
						title: "网站标题",
						dataIndex: "title",
						key: "title",
					},
					{
						title: "组件",
						dataIndex: "layer",
						key: "layer",
						slots: {
							customRender: "layers",
						},
					},
					{
						title: "业务系统",
						dataIndex: "banner",
						key: "banner",
					},
				],
			},
			grid03: {
				pageData: {
					total: 0,
					gridType: 3,
					current: 1,
					firmId: this.$route.params.id,
					keywords: "",
					pageNo: "1",
					pageSize: 10,
				},
				data: [
					{
						id: 5,
						vulnName: "HTTP允许TRACE/TRACK方法",
						vulnType: "Sys", // 脆弱点类型: Sys系统漏洞,App应用漏洞
						status: "UnReported", // UnReported未通报, Reported已通报/待处理, Handled已处理/待上传, Uploaded已上传/待确认, Confirmed已确认
						severity: "Medium", // 严重程度: Low低危,Medium中危,High高危
						cnnvd: "CNNVD-200901-175,CNNVD-201001-256,CNNVD-200412-533",
						cve: "CVE-2003-1567,CVE-2004-2320,CVE-2010-0386",
						reportFile: null, // 报告文件
						createTime: "2021-09-21 08:16:18",
					},
				],
				columns: [
					{
						title: "威胁名称",
						dataIndex: "vulnName",
						key: "vulnName",
					},
					{
						title: "威胁等级",
						dataIndex: "severity",
						key: "severity",
						slots: {
							customRender: "severity",
						},
					},
					{
						title: "威胁类型",
						dataIndex: "vulnType",
						key: "vulnType",
						slots: {
							customRender: "vulnType",
						},
					},
					{
						title: "CVE编号",
						dataIndex: "cve",
						key: "cve",
					},
					{
						title: "CNNVD编号",
						dataIndex: "cnnvd",
						key: "cnnvd",
					},
					{
						title: "发现时间",
						dataIndex: "createTime",
						key: "createTime",
					},
					{
						title: "操作",
						key: "action",
						slots: {
							customRender: "action",
						},
					},
				],
			},
		};
	},
	mounted() {
		const store = useStore();
		store.dispatch("setBreadcrumb", { text: "单位管理/单位详情", isBack: true });
		httpRequest.post("企业详情", { id: this.$route.params.id }).then((res) => {
			this.formState = res.data.firm;
			this.assets = res.data.statistics.assets;
			this.vulns = res.data.statistics.vulns;
			this.assets.lastExecTime = this.assets.lastExecTime ? this.assets.lastExecTime.replace("T", " ") : "";
			this.vulns.lastExecTime = this.vulns.lastExecTime ? this.vulns.lastExecTime.replace("T", " ") : "";
		});
		httpRequest.post("企业性质集合(用于选择框)", {}).then((res) => {
			this.natureTypeIds = res.data.list;
		});
		httpRequest.post("角色集合", {}).then((res) => {
			this.psIds = res.data.list;
		});
		this.thisPostList(1);
		this.thisPostList(2);
		this.thisPostList(3);
	},
	methods: {
		doTheThing: (e, that) => {
			that.$router.push({ name: "bugMgmtDtl", query: { id: e.id } });
		},
		onChangePage: (teg, that) => {
			let page = {
				1: that.grid01,
				2: that.grid02,
				3: that.grid03,
			};
			page[teg.gridType].pageData = teg;
			that.thisPostList(teg.gridType);
		},
		onSubmit(formData) {
			Promise.all([this.$refs.form1.validate(), this.$refs.form2.validate(), this.$refs.form3.validate()]).then(() => {
				this.isloading = true;
				for (const key in formData) {
					const element = formData[key];
					formData[key] = element == null ? "" : element;
				}
				if (formData.urls instanceof String != true) {
					formData.urls = formData.urls.toString();
				}
				if (formData.ips instanceof String != true) {
					formData.ips = formData.ips.toString();
				}
				httpRequest
					.post("编辑企业", formData)
					.then(() => {
						message.success("保存成功");
					})
					.finally(() => {
						this.isloading = false;
					});
			});
		},
		thisPostList(type) {
			let urlObj = {
				1: "企业详情-端口资产列表",
				2: "企业详情-网站测绘列表",
				3: "企业详情-漏洞列表",
			};
			let page = {
				1: this.grid01,
				2: this.grid02,
				3: this.grid03,
			};
			httpRequest.post(urlObj[type], page[type].pageData).then((res) => {
				page[type].data = res.data.list;
				page[type].pageData.current = page[type].pageData.pageNo = res.data.pageNo;
				page[type].pageData.total = res.data.pages * page[type].pageData.pageSize;
				for (let i = 0; i < page[type].data.length; i++) {
					const item = page[type].data[i];
					if (page[type].data.layer) {
						page[type].data.layer = JSON.parse(item.layer);
					}
				}
			});
		},
		back() {
			baseUtil.backPage(this);
		},
	},
};
</script>

<style lang="less" scoped>
.body {
	.card-body {
		padding: 30px;
		margin-top: 10px;
		background: #fff;
		text-align: left;
		.form-card {
			width: 100%;
			text-align: left;

			.body {
				margin-top: 10px;
			}
		}
		.title {
			font-size: 20px;
			font-weight: bold;
			color: #333333;
			border-left: 3px solid #4687ff;
			text-align: left;
			padding-left: 10px;
			&-msg {
				font-size: 16px;
			}
			&-btn {
				float: right;
				font-size: 14px;
				background: #4687ff;
				border-radius: 15px;
				color: #fff;
				.icon {
					float: left;
					margin-top: 2px;
					margin-right: 4px;
				}
			}
			&-btnB {
				float: right;
				padding: 5px 15px;
				font-size: 14px;
				border: 1px solid #cccccc;
				border-radius: 15px;
				color: #333333;
				.icon {
					float: left;
					margin-top: 2px;
					margin-right: 4px;
				}
			}
		}
	}
}
</style>
